<template>
    <div>
        <div>
            <a-badge :count="1" :dotOnly="dotOnly">
                <a-button @click="dotOnly = !dotOnly">按钮</a-button>
            </a-badge>
        </div>
        <pre class="language-html"><code>{{ `<a-badge :count="1">
    <a-button>按钮</a-button>
</a-badge>` }}</code></pre>
        <div v-for="type in typeList" :key="type.name" class="c-m-t-m">
            <p>{{ type.name }}</p>
            <a-table
                :headerList="type.headerList"
                :dataList="type.dataList"
            ></a-table>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dotOnly: false,
            typeList: [
                {
                    name: 'props',
                    headerList: [
                        { name: 'name', text: '名称' },
                        { name: 'remark', text: '说明' },
                        { name: 'type', text: '类型' },
                        { name: 'default', text: '默认值' },
                    ],
                    dataList: [
                        { name: 'count', remark: '要展示的数值，小于等于0时，整个badge会隐藏', type: 'number', default: 'null' },
                        { name: 'dotOnly', remark: '是否仅仅展示小红点，注意：仍会判断count，小于等于0时，整个badge会隐藏', type: 'boolean', default: 'false' },
                        { name: 'hiddenFunc', remark: '判断是否隐藏徽章的方法', type: 'Function', default: 'a => a <= 0' },
                    ],
                }
            ]
        }
    },
}
</script>